<template>
  <main>
    <template v-if="load_status">
      <div class="lbox">
        <div class="weizhi">
          您现在的位置是：
          <nuxt-link to="/">首页</nuxt-link>
          &nbsp;>&nbsp;
          <span>文章</span>
        </div>
        <article>
          <h1>{{ article.title }}</h1>
          <div class="wz_info">
            <span class="wz_frome">阅读:{{ article.view }}</span
            ><span class="wz_time">{{ article.create_at }}</span>
          </div>
          <div class="wz_smalltext">
            {{ article.descr }}
          </div>
          <div class="content" v-html="article.cont">
            <!-- 文章内容 -->
          </div>
          <div class="wz_zhuanzai">
            <p>
              所有文章未经授权禁止转载、摘编、复制或建立镜像，违规转载法律必究。
            </p>
          </div>
          <div class="tags">
            相关标签：
            <nuxt-link
              :to="search_path + '?keywords=' + l"
              v-for="(l, i) in article.label"
              :key="i"
            >
              {{ l }}
            </nuxt-link>
            &nbsp;
          </div>
          <!-- 操作 -->
          <div class="contr-warp">
            <v-btn depressed color="error" :loading="loading" @click="zan">
              赞一个({{ article.zan }})
            </v-btn>
          </div>
          <v-alert v-show="system_error" dense outlined type="error">
            {{ system_error }}
          </v-alert>
          <!-- <div class="ad">
          <a
            href="https://www.aliyun.com/minisite/goods?userCode=l1qstn8f&share_source=copy_link"
            target="_blank"
            ><img src="/skin/html/images/ad3.jpg" alt=""
          /></a>
        </div> -->
          <div class="wz_tuijian">
            <p>推荐阅读</p>
            <ul>
              <li v-for="(s, i) in recommend" :key="i">
                <nuxt-link
                  :to="'/view/' + s.id + '/' + query.type">
                  <i><v-img lazy-src="/occupying.png" :src="s.img"></v-img></i>
                  <h2>{{ s.title }}</h2>
                  <span>{{ s.create_at }}</span>
                </nuxt-link>
              </li>
            </ul>
          </div>

          <!-- 评论 开始 -->
          <comment :aid="article.id" :type="query.type" />
          <!-- 评论 结束 -->
        </article>
      </div>
      <aside class="rbox">
        <div class="show-info" v-show="article.link">
          <h2>资源下载</h2>
          <ul>
            <li><span>资源名称:</span>{{ article.title }}</li>
            <li><span>资源类别:</span>{{ article.type }}</li>
            <li><span>更新时间:</span>{{ article.update_at }}</li>
          </ul>
          <a :href="article.link" class="show-down" target="_blank">立即下载</a>
        </div>
        <div class="hot_news">
          <p class="h_title">相关推荐</p>
          <ul>
            <li v-for="(s, i) in recommend" :key="i">
              <nuxt-link
                :to="'/view/' + s.id + '/' + query.type">
                <i> <v-img lazy-src="/occupying.png" :src="s.img"></v-img> </i
                ><em>{{ i + 1 }}</em>
                <h2>{{ s.title }}</h2>
                <span>{{ s.create_at }}</span>
              </nuxt-link>
            </li>
          </ul>
        </div>
      </aside>
    </template>
    <!-- 错误反馈 -->
    <v-alert v-else dense outlined type="error">
      {{ system_error }}
    </v-alert>
  </main>
</template>

<script>
import axios from "../../../utils/axios"
import {AuthRequest} from "../../../utils/auth"
import Cache from "../../../utils/cache"
export default {
  data() {
    return {
      query: {
        type: 1,
        id: 1,
      },
      loading: true,
      load_status: true,
      system_error: "",
      article: {},
      recommend: [],
      Authorization: "",
      ip:'',
    };
  },
  computed: {
    search_path() {
      if (this.query.type == 1) {
        return "/share";
      } else {
        return "/diary";
      }
    },
  },
  async asyncData({ app, params,error,req }) {
    let id = parseInt(params.id);
    let type = parseInt(params.type);
    if (isNaN(id) || isNaN(type)) {
      return error({statusCode:404})
    }

    return AuthRequest(req,'GET',"article?id=" + id + "&type=" + type)
      .then((res) => {
        if (res.code != 200) {
          console.error(res)
          return error({statusCode:res.code})
        }
        //seo
        const data = res.data;
        app.head.title = data.article.title;
        app.head.meta.push({
          name: "keywords",
          content: data.article.title + "，" + data.article.label.join(","),
        });
        app.head.meta.push({
          name: "description",
          content: data.article.descr,
        });
        return {
          loading: false,
          ip:data.ip,
          article: data.article,
          recommend: data.recommend,
          load_status: true,
          query: params,
          Authorization: data.Authorization,
        };
      })
      .catch((err) => {
        //console.error(err)
        return error({statusCode:err.code})
      });
  },
  mounted() {
    Cache.set("Authorization", this.Authorization, 3600 * 2);
    this.read()
  },
  methods: {
    zan() {
      this.loading = true;
      this.system_error = "";
      axios
        .put("article/zan/" + this.article.id + "/" + this.query.type)
        .then((res) => {
          if (res.code != 200) {
            return Promise.reject(res);
          }
          return axios.get(
            "article?id=" + this.query.id + "&type=" + this.query.type
          );
        })
        .then((res) => {
          this.rend_page(res)
        })
        .catch((err) => {
          this.loading = false;
          this.system_error = err.msg;
        });
    },
    rend_page(res) {
      this.loading = false;
      if (res.code != 200) {
        this.load_status = false;
        this.system_error = res.msg;
        return;
      }

      const data = res.data;
      this.ip = data.ip
      this.article = data.article;
      this.recommend = data.recommend;
      this.system_error = "";
    },
    read() {
      let read_tag = this.ip+'&'+this.article.id+'&'+this.query.type
      let old_read_tag = Cache.get('read_tag')
      if(read_tag==old_read_tag){
        return
      }
      Cache.set('read_tag',read_tag)
      axios
        .put("article/" + this.article.id + "/" + this.query.type).then((res) => {
          if (res.code != 200) {
            this.system_error = err.msg;
          }
        })
        .catch((err) => {
          this.system_error = err.msg;
        });
    },
  },
};
</script>
<style scoped>
a {
  color: #333;
}
.show-info a {
  color: #fff;
}
.contr-warp {
  text-align: center;
  margin: 1em auto;
}
</style>
